<template>
	<view class="contentMain">
		<view class="head-nav">
			<view class='margin-right' :class="navIndex==0?'activite':''" @click="checkIndex(0)">刷卡</view>
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">扫二维码</view>
		</view>
		<!-- 刷卡 -->
		<view v-if="navIndex==0">
			<view class="cardContent" v-for="(item,index) in cardList">
				<view>{{'刷卡机'+item.locationId}}</view>
				<button type="primary" plain="true" size="mini" style="margin: 0;" @click="getIntoClick(item.locationId)">进入</button>
			</view>
		</view>
		<!-- 扫二维码 -->
		<view v-else>
			<view class="content">
				<button type="primary" plain="true" size="mini" style="margin: 0;">扫码</button>
			</view>
		</view>
	</view>
</template>

<script>
	import readCard from "../../common/readCard.js"
	export default {
		data() {
			return {
				navIndex: 0,
				cardList: []
			}
		},
		onHide() {},
		onShow() {
			this.getLocations();
		},
		onLoad() {},
		methods: {
			//获取绑定的定级
			getLocations() {
				readCard.getLocations().then(res => {
					if (null != res && res.code == 0 && null != res.data) {
						console.log(res.data[0].locations);
						this.cardList= JSON.parse(res.data[0].locations)			
					}
				})
			},
			// tabs切换
			checkIndex(index) {
				this.navIndex = index;
			},
			// 进入
			getIntoClick(id) {
				uni.navigateTo({
					url: '../readCardByNfc/payByCard?locationId=' + id
				})
			}
		},
	}
</script>

<style>
	.contentMain {
		width: 100%;
	}

	.head-nav {
		display: flex;
		align-items: center;
		margin: 15px 20px;
		color: #CCCCCC;
	}

	.activite {
		color: #000000;
	}

	.margin-right {
		margin-right: 20px;
	}

	.cardContent {
		padding: 20px;
		border: 1px solid #eaeaea;
		margin: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 5px;
	}

	.content {
		border: 1px solid #eaeaea;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80vh;
		margin: 20px;
	}
</style>